<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container {
            width: 600px;
            height: 400px;
            background-color: rgb(216, 216, 216);
            border-radius: 8px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;
        }

        .input-group {
            margin-top: 30px;
            font-size: 1.2em;
        }

        .input-group label {
           text-align: right;
           display: inline-block;
           width: 100px;
        }

        .input-group input {
            height: 30px;
            width: 400px;
            font-size: 1em;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="input-group">
            <label for="raw-str">输入文字:</label>
            <input type="text" id="raw-str">
            <button id="code">加密</button>
        </div>
        <div class="input-group">
            <label for="code-str">密文:</label>
            <input type="text" id="code-str">
        </div>
        <div class="input-group">
            <label for="decode-str">原文:</label>
            <input type="text" id="decode-str">
            <button id="decode">解密</button>
        </div>
    </div>
    <script>
        // var num = 1234
        // var codeNum = num*2 + 1
        // var decodeNum = (codeNum-1)/2
        var s = '你'
        var sUnicode = s.charCodeAt();
        var sCode = sUnicode * 2 + 1;
        console.log(String.fromCharCode(sCode))
        //3个input，
        //第一个Input输入正常文字
        //第二个显示加密后的文字
        //第三个显示解密后的文字
        // var codeBtn = document.getElementById('code');
        // var decodeBtn = document.getElementById('decode');
        // var rawStrEle = document.getElementById('raw-str');
        // var codeStrEle = document.getElementById('code-str');
        // var decodeStrEle = document.getElementById('decode-str');

        // code.onclick = function () {
        //     var rawStr = rawStrEle.value;
        //     var codeStr = ''
        //     //加密过程
        //     for(var i=0; i<rawStr.length; i++){
        //         var unicode = rawStr[i].charCodeAt();
        //         //加密算法
        //         var codeUnicode = unicode + 1
        //         //加密后的字符
        //         var codeChar = String.fromCharCode(codeUnicode);
        //         codeStr += codeChar
        //     }
        //     //把加密后的文字设置到input里面去
        //     codeStrEle.value = codeStr
        // };

        // decodeBtn.onclick = function(){
        //     var codeStr = codeStrEle.value;
        //     var decodeStr = '';
        //     for(var i=0; i<codeStr.length; i++){
        //         var unicode = codeStr[i].charCodeAt()
        //         //解密算法
        //         var decodeUnicode = unicode - 1
        //         //解加密后的字符
        //         var decodeChar = String.fromCharCode(decodeUnicode);
        //         decodeStr += decodeChar
        //     }
        //     decodeStrEle.value = decodeStr

        // }

        //charCodeAt()
        //String.fromCharCode()

        //获取相应的输入框元素
        var rawStrEle = document.getElementById('raw-str')
        var codeStrEle = document.getElementById('code-str')
        var decodeStrEle = document.getElementById('decode-str')
        var codeBtn = document.getElementById('code')
        var decodeBtn = document.getElementById('decode')

        // //给加密按钮添加事件，加密过程
        // codeBtn.onclick = function(){
        //     //获取输入的内容
        //     var rawStr = rawStrEle.value;
        //     var codeStr = ''
        //     //遍历输入的内容
        //     for(var i=0; i<rawStr.length; i++){
        //         //拿到当前遍历的字符的unicode编码
        //         var charUnicode = rawStr.charCodeAt(i);
        //         //把charUnicode进行加密 +5
        //         var codeCharUnicode = charUnicode + 5
        //         //把加密以后的编码生成字符串
        //         var codeChar = String.fromCharCode(codeCharUnicode)
        //         //连接字符串
        //         codeStr += codeChar
        //     }
        //     //给加密输入框设置codeStr
        //     codeStrEle.value = codeStr
        // };
        // //给解密按钮添加事件，解密过程
        // decodeBtn.onclick = function(){
        //     //获取密文
        //     var codeStr = codeStrEle.value
        //     var decodeStr = ''
        //     for(var i=0; i<codeStr.length; i++){
        //         var codeUnicode = codeStr.charCodeAt(i)
        //         var decodeUnicode = codeUnicode - 5
        //         var decodeChar = String.fromCharCode(decodeUnicode)
        //         decodeStr += decodeChar
        //     }
        //     decodeStrEle.value = decodeStr

        // }
            //通过base64加密和解密
         //给加密按钮添加事件，加密过程
         codeBtn.onclick = function(){
            //获取输入的内容
            var rawStr = rawStrEle.value;
            var codeStr = btoa(rawStr)
            codeStrEle.value = codeStr
        };
        //给解密按钮添加事件，解密过程
        decodeBtn.onclick = function(){
            //获取密文
            var codeStr = codeStrEle.value
            var decodeStr = atob(codeStr)
            decodeStrEle.value = decodeStr

        }
        




    </script>
</body>

</html>